 <!-- DANG NHAP -->
  <div class="col-md-8">
      <h5 class="font"> CẬP NHẬT THÔNG TIN CÁ NHÂN</h5>
<link rel="stylesheet" href="public/exts/uploadfile/css/jquery.fileupload-ui.css">
     <script src="public/exts/uploadfile/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="public/exts/uploadfile/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="public/exts/uploadfile/js/jquery.fileupload.js"></script> 

    <form class="form-horizontal" role="form" method="post" id="avataform" action="<?php echo url(); ?>">
  
  
    	<?php if($data[error] != "")
{	echo "<Br/><div class='alert alert-danger'>";
	echo "Có Lỗi  :";	
	foreach($data[error] as $value)

	{

		echo "<div>".$value."</div>";

	}

	echo "</div>";

}?>

 <?php if($data['success'] != "")
{
	echo "<Br/><div class='alert alert-success'>";
	echo $data['success'];
	echo "</div>";

}else{?>
  <Br/>
  

  <div class="form-group">
  
  	<div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Tên Hiển Thị</label>
            <div class="col-lg-8">
                 <input type="text" class="form-control" name="user_name" id="user_name" value="<?php echo $_SESSION['user']['name']; ?> " required />
            </div>
 	 </div>
  
     <div class="form-group">
    		<label for="gioithieu" class="col-lg-4 control-label">Giới Thiệu</label>
            <div class="col-lg-8">
                 <textarea  class="form-control" id="gioithieu"  name="gioithieu" required> <?php echo $_SESSION['user']['gioithieu']; ?></textarea>
            </div>
  </div>
  
   
   <div class="form-group">
  
   		 <label  class="col-lg-4 control-label">Avatar hiện tại</label>
        <div class="col-lg-8" id="current_avatar">
            <?php 
    
            if($_SESSION['user']['avatar']!=""){
                    $tmpArray = explode('_', $_SESSION['user']['avatar']);
                    
            ?>
            <img src="<?php echo AVATAR.'100/'.$tmpArray[0].'/'.$tmpArray[1] . '/' . $tmpArray[2] . '/'.$_SESSION['user']['avatar'] ?>" />
            <?php }else
			if($_SESSION['user']['facebook']==1){
				?>
                <img src="https://graph.facebook.com/<?php echo $_SESSION['user']['facebook_id'] ?>/picture" />
            <?php
			}
			
			?>
        </div>
  </div>
  
  
   <div class="form-group" id="avatar_update" style="display:none">
    <label class="col-lg-4 control-label">Avatar mới</label>
    <div class="col-lg-8">
         	  <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </div>
  </div>
 
  
    <div class="form-group">
    <label for="password" class="col-lg-4 control-label">Chọn Avatar</label>
    <div class="col-lg-8">
    	<input type="hidden" name="avatar_link" id="avatar_link" value="<?php echo $_SESSION['user']['avatar']; ?> " />
      <input type="file" class="form-control" id="avatar"  name="files[]" multiple> <br/>
           <!-- <div id="progress" class="progress">
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>	 
            <div class="progress-extended">&nbsp;</div>-->
        </div>
    </div>

  
  
  <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
          <button type="submit" class="btn btn-success" id="change">LƯU THAY ĐỔI</button> 
        </div>
  </div>
  
  </div> <!-- End of top form group -->
</form>
<?php }?>

  
  
   </div> 
  </div>
  <!-- DOI MAT KHAU -->
  
  <script>
// Attach a submit handler to the form
$( "#avataform" ).submit(function( event ) {
  // Stop form from submitting normally
  event.preventDefault();
  //var values='module=user&act=avatar&gioithieu='+$('#gioithieu').val()+'&avatar_link='+$('#avatar_link').val()+'&name='+$('#user_name').val();

$.ajax({
  type: "POST",
  url:'<?= HOME ?>index.php?module=user&act=avatar' ,
  data: {gioithieu:$('#gioithieu').val(), avatar_link: $('#avatar_link').val(), name: $('#user_name').val()},
  success: function(data){
		result = $.parseJSON(data);
		if(result.mess){
			popupMessage('Thành công', result ,'alert-success');
		}else if(result.error){
			popupMessage('Thông Báo Lỗi', result ,'alert-danger');
		}
 }
 
});
 
  
});
</script>
  <script>


    $('#avatar').fileupload({
		
		maxNumberOfFiles: 1,
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
      	//url: 'jqueryupload/server/php/index.php',
      	url: '<?= IMAGE_URL ?>avatar/index.php',
      	progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress-bar').css(
                'width',
                progress + '%'
            ).text(progress + '%');
      	},
		
      	success: function(data){setImageName(data); $('.progress-bar').remove();},
      	error: function (e, data) {
            alert(error);
        }
        
    });

	$('#avatar').bind('fileuploadadd', function(){
		$('#uploadImage_error').remove();
		});
    
    $('#avatar').fileupload('option', {
        maxFileSize: 50000,
        resizeMaxWidth: 1500,
        resizeMaxHeight: 4000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    });

    $('#avatar').bind('fileuploaddestroy', function (e, data) {
		resultFileObj = parseQueryString(data.url);
		resultFile = resultFileObj.file;
		$('#avatar').parent().find('input:hidden').each(function(){
			if ($(this).val() == resultFile)  {
		        $(this).remove();
		    }
		});
    });

  


    function setImageName(data){
        
        newData = $.parseJSON(data);

		if(typeof newData.files[0].error != 'undefined'){
			$('#avatar').parent().append('<div id="uploadImage_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+ newData.files[0].error +'</div>');
			$('#uploadImage_error').slideDown('fast');	
		}
        
		$.each(newData, function(e1, value1){
			$.each(value1[0], function(e2, value2){
				if(e2 == 'name'){
					$('#avatar_link').val(value2);
				}
				if(e2 == '100Url'){
					$('#current_avatar').html('<img src="' + value2 + '" />');
				}
			});
		
		});

		$.ajax({
			url : '<?= BASE_URL ?>index.php?module=user&act=ajax&setNewAvatar=1',
			type: 'POST',
			data: {newAvatar : newData.files[0].name },
			success: function(dataAvatar){
			}
		});

	}

</script>
  
  
  
  
  
  <script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
  <script src="public/exts/js/jqueryupload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="public/exts/js/jqueryupload/blueimp.js"></script>
<!-- blueimp Gallery script -->
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="public/exts/js/jqueryupload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->

